<template>
  <section>
    <el-card class="m_t_b_10px xd-LearningHome-OnlineExams-ExamCenter" shadow="hover">
      <el-tabs v-model="activeName">
        <el-tab-pane label="学习考试" name="1">
          <p class="text_color_429688 text_size_9 font_bold m_b_15">待考试卷</p>
          <ExamItemInfo
            :paperInfo="paperInfo"
            @click="openPaper"
            @size-change="paperSizeChange"
            @page-change="paperPageChange"
          ></ExamItemInfo>
          <p class="text_color_429688 text_size_9 font_bold m_b_15">需要补考试卷</p>
          <ExamItemInfo
            :paperInfo="retakeInfo"
            @click="openPaper"
            @size-change="retakeSizeChange"
            @page-change="retakePageChange"
          ></ExamItemInfo>
        </el-tab-pane>
        <el-tab-pane label="闯关答题" name="2" class="tabs-2">
          <!-- <RushItemInfo
          :paperInfo="throughInfo"
          @click="openThrough"
          @size-change="throughSizeChange"
          @page-change="throughPageChange"
          ></RushItemInfo>-->
          <div v-show="enterInfo.enterStep===1" class="step-1">
            <pre class="tabs-2-pre">
          闯关说明：
          1、用户从题库各分类试题中至少随机抽取15道试题。
          2、创建闯关过程中可选择是否查看试题解析。
          3、闯关获取学分根据试题分数进行计算。若闯关选择查看试题解析则不获取学分，
             若选择不查看试题解析，全答对得3分，答错1题不得分，每天最多可获得6个积分。
        </pre>
            <el-button type="primary" class="btn-center" @click="createEnter(1)">创建闯关</el-button>
          </div>
          <div v-show="enterInfo.enterStep===2" class="step-2">
            <p>
              <span class="text_color_666666">闯关名称：</span>
              <span class="text_color_429688 text_bold">{{enterInfo.stepInfo.name}}</span>
            </p>
            <div class="m_t_15" style="display:flex;text-align:left;">
              <el-button
                :type="enterInfo.type===1?'primary':''"
                round
                style="margin:0px;"
                @click="switchType(1)"
              >
                <b>方式1：</b>从全部试题中抽取
              </el-button>
              <el-button
                :type="enterInfo.type===2?'primary':''"
                round
                @click="switchType(2)"
                style="margin-left:auto;"
              >
                <b>方式2：</b>从分类试题中抽取
              </el-button>
            </div>
            <div class="m_t_15">
              <div v-show="enterInfo.type===1">
                <span>
                  <b>全部试题</b>（
                  <span class="text_color_429688">{{enterInfo.stepInfo.questionCount}}</span>道 ）
                </span>
                <span>随机抽取</span>
                <el-input-number
                  v-model="enterInfo.stepInfo.count"
                  :min="1"
                  :max="enterInfo.stepInfo.questionCount"
                  :controls="false"
                  size="small"
                  style="width:60px;"
                ></el-input-number>
              </div>
              <div v-show="enterInfo.type===2">
                <p class="text_size_24">
                  <b>全部试题</b>（
                  <span class="text_color_429688">{{enterInfo.stepInfo.questionCount}}</span>
                  道 ）
                </p>
                <div class="m_t_15px"></div>
                <div v-for="item in enterInfo.categoryQuestionList" :key="item.id" class="m_t_15px">
                  <span>
                    <b>{{item.name}}</b>（
                    <span class="text_color_429688">{{item.total}}</span>
                    道 ）
                  </span>
                  <span>随机抽取</span>
                  <!-- <el-input
                    v-model="item.count"
                    type="number"
                    size="small"
                    :max="item.total"
                    placeholder="请输入数量"
                    style=" width: 50px;"
                  ></el-input>-->
                  <el-input-number
                    v-model="item.count"
                    controls-position="right"
                    :min="0"
                    :max="item.total"
                    :controls="false"
                    size="small"
                    style="width:60px;padding-left:0px;"
                  ></el-input-number>
                </div>
              </div>
            </div>
            <div class="m_t_15 m_b_30">
              <span>请选择是否查看解析：</span>
              <el-radio v-model="enterInfo.stepInfo.isAnalysis" label="1">是</el-radio>
              <el-radio v-model="enterInfo.stepInfo.isAnalysis" label="2">否</el-radio>
            </div>

            <el-button
              type="primary"
              class="btn-center"
              @click="createEnter(2)"
              :loading="enterInfo.submitLoading"
            >创建闯关</el-button>
          </div>

          <div
            v-if="enterInfo.enterStep===3 && enterInfo.questionList && enterInfo.questionList.length>0"
            class="step-3"
          >
            <p class="text_size_18">
              题目：
              <span v-text="enterInfo.curIndex+1" class="text_color_429688"></span>
              <span v-text="'/'+enterInfo.stepInfo.count"></span>
            </p>
            <div class="m_t_15">
              <div>
                <span
                  class="text_color_429688"
                >{{(enterInfo.curIndex+1)+'、'+enterInfo.questionList[enterInfo.curIndex].questionTypeName}}</span>
                <span
                  v-html="enterInfo.questionList[enterInfo.curIndex].questionStemText"
                  class="title"
                ></span>
              </div>
              <template v-if="enterInfo.questionList[enterInfo.curIndex].questionType!==2">
                <div
                  class="m_t_15 item answer-item"
                  v-for="(item) in enterInfo.questionList[enterInfo.curIndex].questionOptionList"
                  :key="item.id"
                >
                  <el-button round :type="getButtonType(item)" @click="answerClick(item)">
                    <pre
                      style="display:flex;margin:0px;font-size:18px;"
                      v-html="item.questionType!==3? item.optionLabel+'.'+item.optionContent:item.optionContent"
                    ></pre>
                  </el-button>
                </div>
              </template>
              <section
                class="form-input-panel"
                v-if="enterInfo.questionList[enterInfo.curIndex].questionType===2"
              >
                <div
                  class="item"
                  v-for="(p,index) in enterInfo.questionList[enterInfo.curIndex].questionOptionList"
                  :key="p.optionId"
                >
                  <label v-text="(index+1)" class="text_color_429688"></label>
                  <el-input
                    type="textarea"
                    autosize
                    v-model="p.answerContent"
                    :readonly="enterInfo.questionList[enterInfo.curIndex].userAnswer"
                    :class="[getTextBackgroundClass(p)]"
                  ></el-input>
                </div>
                <div v-if="enterInfo.rightInfo.length>0 && enterInfo.stepInfo.isAnalysis==='1'">
                  <p>正确答案：</p>
                  <span v-for="(item,index) in enterInfo.rightInfo" :key="index">{{item.content}}</span>
                </div>
              </section>
            </div>

            <div class="m_b_30"></div>
            <el-button
              type="primary"
              class="btn-center"
              @click="submitExam"
              :loading="enterInfo.submitLoading"
              v-show="!enterInfo.showNext"
            >提交</el-button>
            <div class="m_t_15" v-show="enterInfo.showNext" style="display:flex;">
              <el-link
                :underline="false"
                style="font-size:18px;"
                @click="enterInfo.showExplain=true"
                v-show="enterInfo.stepInfo.isAnalysis==='1'"
              >
                <div style="display:flex;align-items: center;color: #999999;">
                  <img src="@/assets/imgs/icon_jiexi.png" style="margin-right:10px;" />查看解析
                </div>
              </el-link>
              <el-link
                v-if="enterInfo.curIndex < this.enterInfo.stepInfo.count - 1"
                :underline="false"
                type="primary"
                @click="nextQuestion"
                style="margin-left:auto;font-size:18px;"
              >下一题</el-link>
              <el-link
                v-else-if="enterInfo.curIndex === this.enterInfo.stepInfo.count - 1"
                :underline="false"
                type="primary"
                @click="submitPractise"
                style="margin-left:auto;font-size:18px;"
              >完成闯关</el-link>
            </div>
            <div
              v-show="enterInfo.showExplain && enterInfo.stepInfo.isAnalysis==='1'"
              class="m_t_15"
              style="border-top:solid 1px #dddddd;border-bottom:solid 1px #dddddd;"
            >
              <div style="margin-top:10px;">试题解析：</div>
              <pre v-html="curQuestionAnalysis"></pre>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-card class="m_t_15" shadow="hover" v-show="activeName==='2' && enterInfo.enterStep===1">
      <div slot="header" class="title">闯关记录</div>
      <el-table :data="enterInfo.list" :show-header="false" style="width: 100%">
        <el-table-column label="闯关名称" width="250">
          <template slot-scope="scope">
            <span class="text_color_333333 text_size_8 text_bold">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="题数" width="250">
          <template slot-scope="scope">
            <span class="text_color_666666 text_size_8">
              {{ scope.row.questionCount+'/'+scope.row.questionTotal+'题'}}
              <span
                style="width: 1px;height: 11px;background-color: #dddddd; display: inline-block;border-left:solid 1px white;"
              ></span>
              {{scope.row.date }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="points" label="积分">
          <template slot-scope="scope">
            <span class="text_color_429688 text_size_8">{{'+'+ scope.row.points }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="enterSizeChange"
        @current-change="enterCurrentChange"
        :current-page="enterInfo.page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="enterInfo.size"
        :layout="PAGE_LAYOUT"
        :total="enterInfo.total"
        class="m_t_22"
      ></el-pagination>
    </el-card>
  </section>
</template>
<script>
const ExamItemInfo = () => import('@/components/ExamItemInfo')

export default {
  name: 'ExamCenter',
  components: {
    ExamItemInfo
  },
  data() {
    return {
      activeName: '1',
      paperInfo: {
        total: 10,
        page: 1,
        size: 5,
        list: []
      },
      retakeInfo: {
        total: 10,
        page: 1,
        size: 5,
        list: []
      },
      throughInfo: {
        total: 10,
        page: 1,
        size: 5,
        list: []
      },
      enterInfo: {
        list: [],
        page: 1,
        size: 10,
        total: 0,
        enterStep: 1,
        stepInfo: {
          name: '',
          questionCount: 15,
          count: 15,
          isAnalysis: '1'
        },
        type: 1,
        categoryQuestionList: [],
        curIndex: 0,
        questionList: [],
        showNext: false,
        // 正确的答案,提交答题后返回
        rightInfo: [],
        showExplain: false,
        explainContent: '<div style="color:red">这是解析内容</div>xfdfd',
        submitLoading: false
      }
    }
  },
  computed: {
    curQuestionAnalysis() {
      const questionList = this.enterInfo.questionList
      return questionList.length ? questionList[this.enterInfo.curIndex].questionAnalysis : ''
    }
  },
  created() {
    this.getPaperList()
    this.getRetakeList()
    // 先这样请求，后面优化。
    this.getThroughList()
    this.getEnterList()
    this.fetchCategoryQuestionList()
  },
  methods: {
    openPaper(item) {
      utils.setItem('ExamInstructionsPaperInfo', item)
      this.$router.push({ path: '/LearningHome/OnlineExams/ExamInstructions', query: { id: item.paperId } })
    },
    // 待考试卷列表
    getPaperList() {
      utils.post('/examination/NeedExaminationList', { pageNumber: this.paperInfo.page, pageSize: this.paperInfo.size }, res => {
        if (res.success) {
          this.paperInfo.list = res.data.rows
          this.paperInfo.total = res.data.total
        }
      })
    },
    paperSizeChange(val) {
      this.paperInfo.size = val
      this.getPaperList()
    },
    paperPageChange(val) {
      this.paperInfo.page = val
      this.getPaperList()
    },
    retakeSizeChange(val) {
      this.retakeInfo.size = val
      this.getRetakeList()
    },
    retakePageChange(val) {
      this.retakeInfo.page = val
      this.getRetakeList()
    },
    // 补考试卷列表
    getRetakeList() {
      utils.post('/examination/SupplementaryExaminationList', { page: this.retakeInfo.page, size: this.retakeInfo.size }, res => {
        if (res.success) {
          this.retakeInfo.list = res.data.rows
          this.retakeInfo.total = res.data.total
        }
      })
    },
    openThrough(item) {
      this.$router.push({ path: '/LearningHome/OnlineExams/ExamInstructions', query: { id: item.paperId } })
    },
    getThroughList() {
      utils.post('/rushCheckpoint/RushCheckpointList', { page: this.throughInfo.page, size: this.throughInfo.size }, res => {
        if (res.success) {
          this.throughInfo.list = res.data.rows
        }
      })
    },
    throughSizeChange(val) {
      this.throughInfo.size = val
      this.getThroughList()
    },
    throughPageChange(val) {
      this.throughInfo.page = val
      this.getThroughList()
    },
    // 闯关
    createEnter(val) {
      if (val === 1) {
        this.enterInfo.curIndex = 0
        this.enterInfo.showNext = false
        this.enterInfo.rightInfo = []
        this.enterInfo.showExplain = false
        // 请求接口获取闯关信息
        this.enterInfo.stepInfo.name = this.$store.state.userInfo.name + '闯关' + new Date().Format('yyyyMMddhhmm')
        this.enterInfo.enterStep = val + 1
      } else if (val === 2) {
        this.enterInfo.submitLoading = true
        let foundPractiseData = []
        if (this.enterInfo.type === 2) {
          foundPractiseData = [].concat(this.enterInfo.categoryQuestionList)
          foundPractiseData = foundPractiseData.map(item => {
            return {
              dicType: item.dicType,
              total: item.total,
              count: item.count
            }
          })
          // 总数不能少于 1
          let total = 0
          foundPractiseData.forEach(element => {
            total += element.count
          })
          if (!total) {
            this.$message.error('请选择试题数目')
            this.enterInfo.submitLoading = false
            return;
          }
          if (total<15) {
            this.$message.error('最少选择15道题')
            this.enterInfo.submitLoading = false
            return;
          }
          // 同步修改总题目数量
          this.enterInfo.stepInfo.count = total
        } else {
          let ct=parseInt(this.enterInfo.stepInfo.count)
          if (ct<15) {
            this.$message.error('最少选择15道题')
            this.enterInfo.submitLoading = false
            return;
          }
          foundPractiseData.push({ total: this.enterInfo.stepInfo.questionCount, count: ct })
        }

        // 发起请求
        utils.post('practise/FoundPractisePaper', {
          practiseTitle: this.enterInfo.stepInfo.name,
          practiseType: +this.enterInfo.stepInfo.isAnalysis,
          chooseType: this.enterInfo.type,
          foundPractiseData: foundPractiseData
        }, res => {
          if (res.success) {
            res.data.practiseRecordAnswerList.forEach(element => {
              switch (element.questionType) {
                case 0:
                case 3:
                  element.selectedAnswer = ''
                  break;
                case 1:
                case 2:
                  element.selectedAnswer = []
                  break;
              }
            })
            this.enterInfo.questionList = res.data.practiseRecordAnswerList
            this.enterInfo.enterStep = val + 1
            this.practiseRecord = res.data.practiseRecord
          }
          this.enterInfo.submitLoading = false
        })
      } else {
        this.enterInfo.enterStep = val + 1
      }
    },
    getEnterList() {
      utils.post('practise/PractiseRecord', {
        pageNumber: this.enterInfo.page,
        pageSize: this.enterInfo.size
      }, res => {
        if (res.success) {
          this.enterInfo.list = res.data.rows.map(item => {
            return Object.assign(item, {
              id: item.practiseId,
              name: item.practiseTitle,
              questionCount: item.userTrueNum,
              questionTotal: item.practiseQuestionNum,
              date: item.createTime,
              points: item.userPoints
            })
          })
          this.enterInfo.total = res.data.total
        }
      })

      // for (let index = 0; index < 5; index++) {
      //   this.enterInfo.list.push({
      //     id: index,
      //     name: '闯关题目' + index,
      //     questionCount: index * 3,
      //     questionTotal: 20,
      //     date: '2019-11-01',
      //     points: index
      //   })
      // }
    },
    enterSizeChange(val) {
      this.enterInfo.size = val
      this.getEnterList()
    },
    enterCurrentChange(val) {
      this.enterInfo.page = val
      this.getEnterList()
    },
    switchType(val) {
      this.enterInfo.type = val
      if (val === 2) {
        this.enterInfo.stepInfo.count = 0
        this.enterInfo.categoryQuestionList.forEach(element => {
          this.enterInfo.stepInfo.count += element.count
        })
      } else {
        this.enterInfo.stepInfo.count = 10
      }
    },
    submitExam() {
      var userAnswer = ''
      var userAnswerId = ''
      var element = this.enterInfo.questionList[this.enterInfo.curIndex]
      //  questionType 试题类型 2 填空题 3 判断题  0 单选 1 多选
      switch (element.questionType) {
        case 0:
          userAnswer = ''
          userAnswerId = ''
          break;
        case 3:
          userAnswer = ''
          userAnswerId = ''
          break;
        case 1:
          userAnswer = []
          userAnswerId = []
          break;
        case 2:
          userAnswer = []
          userAnswerId = []
          break;
      }
      if (element.questionType !== 2) {
        element.questionOptionList.forEach(p => {
          if (element.questionType === 1) {
            if (element.selectedAnswer.length > 0 && ~element.selectedAnswer.indexOf(p.optionId)) {
              userAnswer.push(p.optionLabel)
              userAnswerId.push(p.optionId)
            }
          } else {
            const selectedAnswer = element.selectedAnswer.find(item => {
              return item === p.optionId
            })
            if (selectedAnswer) {
              userAnswer = p.optionLabel
              userAnswerId = p.optionId
            }
          }
        })
      } else if (element.questionType === 2) {
        element.questionOptionList.forEach(p => {
          if (p.answerContent) {
            userAnswer.push(p.answerContent)
          }
        })
      }

      this.enterInfo.submitLoading = true
      utils.post('practise/CheckAnswer', {
        answerId: element.id,
        userAnswer: userAnswer
      }, res => {
        if (res.success) {

          this.enterInfo.showNext = true
          element.userAnswer = true
          // 除了填空题直接返回答案外，其它均返回选项的 ID
          let trueAnswers = []
          var isTrue = true
          const trueAnswerIds = res.data.trueAnswerIds.replace(/\s/g, '').replace(/[[\]]/g, '').split(',')
          if (process.env.NODE_ENV !== 'production') {
            console.log('用户的答案选项', userAnswer)
            console.log('用户的答案 ID', userAnswerId)
            console.log('正确的答案', trueAnswerIds)
          }
          //answerFlag  是否正确 0否 1是
          if (element.questionType === 2) {
            isTrue= res.data.answerFlag==1;
            trueAnswers = trueAnswerIds.join(',')
            // trueAnswerIds.forEach(p => {
            //   if (!userAnswer.includes(p)) {
            //     isTrue = false
            //     return false
            //   }
            // })
          } else {
            const trueAnswerList = element.questionOptionList.filter(item => {
              return ~trueAnswerIds.indexOf(item.optionId)
            })
            if (trueAnswerList.length) {
              trueAnswerList.forEach(item => {
                trueAnswers.push(item.optionId)
                if (!userAnswerId.includes(item.optionId)) {
                  isTrue = false
                  return false
                }
              })
              trueAnswers = trueAnswers.join(',')
            } else {
              isTrue = false
            }
          }
          this.enterInfo.rightInfo = trueAnswers
          if (this.enterInfo.stepInfo.isAnalysis === '2' && !isTrue) {
            this.$message.error('答题错误，结束闯关')
            this.enterInfo.enterStep = 1
            this.enterInfo.rightInfo = ''
          }
        }
        this.enterInfo.submitLoading = false
      })
    },
    nextQuestion() {
      // 清空下答案
      this.enterInfo.rightInfo = ''
      this.enterInfo.showNext = false
      this.enterInfo.showExplain = false
      if (this.enterInfo.curIndex < this.enterInfo.stepInfo.count) {
        this.enterInfo.curIndex++
      }
    },
    answerClick(item) {
      var element = this.enterInfo.questionList[this.enterInfo.curIndex]
      if (element.userAnswer) {
        return
      }
      if (element.questionType === 1) {
        var index = element.selectedAnswer.indexOf(item.optionId)
        if (index === -1) {
          element.selectedAnswer.push(item.optionId)
        } else {
          element.selectedAnswer.splice(index, 1)
        }
      } else {
        element.selectedAnswer = []
        element.selectedAnswer.push(item.optionId)
      }
    },
    getButtonType(item) {
      var element = this.enterInfo.questionList[this.enterInfo.curIndex]
      if (!element.userAnswer) {
        if (element.selectedAnswer.length > 0) {
          if (element.selectedAnswer.indexOf(item.optionId) >= 0) {
            return 'primary'
          } else {
            return ''
          }
        }
      } else {
        if (!element.userAnswer) {
          if (element.selectedAnswer.indexOf(item.optionId) !== -1) {
            return 'primary'
          }
        } else {
          if (element.selectedAnswer.indexOf(item.optionId) !== -1 && this.enterInfo.rightInfo.indexOf(item.optionId) !== -1) {
            return 'primary'
          }
          if (element.selectedAnswer.indexOf(item.optionId) !== -1 && this.enterInfo.rightInfo.indexOf(item.optionId) === -1) {
            return 'danger'
          }
          if (element.selectedAnswer.indexOf(item.optionId) === -1 && this.enterInfo.rightInfo.indexOf(item.optionId) !== -1) {
            return 'primary'
          }
        }
      }
    },
    // 获取试题分类个数
    fetchCategoryQuestionList() {
      utils.post('practise/PractiseChooseQuestion', {}, res => {
        if (res.success) {
          const categoryList = res.data.items.map(item => {
            return Object.assign(item, {
              id: item.dicType,
              name: item.dicName,
              total: item.questionNum,
              // 默认抽取 0 道，但是总数需大 1
              count: 0
            })
          })

          this.enterInfo.stepInfo.questionCount = res.data.total
          this.enterInfo.categoryQuestionList = categoryList
        }
      })
    },
    // 完成闯关
    submitPractise() {
      if (process.env.NODE_ENV !== 'production') {
        console.log('practiseRecord:', this.practiseRecord)
      }
      utils.post('practise/SubmitPractise', {
        practiseId: this.practiseRecord.practiseId
      }, res => {
        if (res.success) {
          this.enterInfo.enterStep = 1
        }
      })
    },
    getTextBackgroundClass(item) {
      var element = this.enterInfo.questionList[this.enterInfo.curIndex]
      if (element.userAnswer) {
        let isMark = false
        for (let i = 0; i < this.enterInfo.rightInfo.length; i++) {
          if (this.enterInfo.rightInfo[i].id === item.optionId) {
            isMark = true
            break;
          }
        }
        if (!isMark) {
          return 'answer-error'
        }
      }
    }
  }
}
</script>
<style lang="less">
.xd-LearningHome-OnlineExams-ExamCenter {
  .el-card__body {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;

    .el-tabs__nav {
      height: 59px;
    }

    .el-tabs__nav-scroll {
      padding-left: 1.3vw;
    }

    .el-tabs__content {
      padding-left: 1.3vw;
      padding-right: 1.3vw;
    }

    .el-tabs__item {
      font-size: 18px;
      font-weight: bold;
      margin-top: 15px;
      margin-bottom: 10px;
      display: inline-flex;
      height: 20px;
    }

    .tabs-2 {
      .tabs-2-pre {
        font-size: 16px;
        line-height: 36px;
        letter-spacing: 0px;
        color: #666666;
      }

      .btn-center.el-button--primary {
        margin: 0 auto;
        display: block;
      }

      .step-2 {
        width: 530px;
        margin: 50px auto 50px auto;

        .el-button {
          font-size: 16px;
          color: #cb2c21;
        }

        .el-button--primary {
          color: white;
        }

        .el-input--small .el-input__inner {
          margin-left: 15px;
          padding: 0px;
          padding-left: 10px;
          color: #cb2c21;
        }
      }

      .step-3 {
        .answer-item {
          display: flex;
          align-items: center;
          .el-button {
            min-width: 300px;
          }
        }

        .form-input-panel {
          .item {
            display: flex;
            padding: 5px;
            align-items: center;

            label {
              display: flex;
              border: solid 1px #cb2c21;
              padding: 5px;
              width: 0.6vw;
              height: 0.6vw;
              border-radius: 50%;
              align-items: center;
              justify-content: center;
            }

            .el-textarea .el-textarea__inner {
              border-left: none;
              border-top: none;
              border-right: none;
              font-size: 1vw;
            }
          }
        }

        .question-resolution {
          margin-top: 2vw;
          margin-bottom: 2vw;
          margin-left: 2em;

          .desc {
            display: flex;
            height: 50px;
            color: #666666;
            font-size: 0.8vw;
            text-align: center;
            align-items: center;

            p {
              height: 25px;
            }

            .value {
              font-size: 1.3vw;
            }
            .el-divider--vertical {
              height: 100%;
              margin: 0 3vw;
            }
          }

          .resolution {
            display: flex;
            margin-top: 2vw;
            color: #999999;
            p {
              padding: 0px;
              display: flex;
              margin: 0px;
              font-size: 0.8vw;
            }
            div {
              font-size: 0.8vw;
            }
          }
        }

        .el-radio__label,
        .el-checkbox__label {
          pre {
            display: inline-flex;
          }
        }

        .answer-error {
          background: #f56c6c;
          color: white;
          textarea {
            background: #f56c6c;
            color: white;
          }
        }

        .el-button--primary {
          pre * {
            color: white !important;
          }
        }
      }
    }
  }

  .el-card__body .tabs-2 .step-2 .el-input--small .el-input__inner {
    padding-left: 0px;
  }
}
</style>
